M
MLOG
React Lazy Loading: Tách Code Component để Tối Ưu Hóa Hiệu Suất | MLOG | MLOG ); } export default ImageGallery;

Và component Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Trong ví dụ này, mỗi hình ảnh được bao bọc trong một component <Suspense>, vì vậy một thông báo tải sẽ được hiển thị cho mỗi hình ảnh trong khi nó đang được tải. Điều này ngăn chặn toàn bộ trang bị chặn trong khi các hình ảnh đang được tải xuống.

Các kỹ thuật nâng cao và những điều cần cân nhắc

1. Error Boundaries (Ranh giới lỗi)

Khi sử dụng lazy loading, điều quan trọng là phải xử lý các lỗi tiềm ẩn có thể xảy ra trong quá trình tải. Error Boundaries có thể được sử dụng để bắt các lỗi này và hiển thị một giao diện người dùng dự phòng. Bạn có thể tạo một component error boundary như sau:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Cập nhật state để lần render tiếp theo sẽ hiển thị UI dự phòng.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Bạn cũng có thể ghi lại lỗi vào một dịch vụ báo cáo lỗi
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Bạn có thể render bất kỳ UI dự phòng tùy chỉnh nào
      return 
Đã có lỗi xảy ra.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Sau đó, bao bọc component <Suspense> bằng <ErrorBoundary>:



  Loading...}>

Nếu một lỗi xảy ra trong khi tải MyComponent, <ErrorBoundary> sẽ bắt nó và hiển thị giao diện người dùng dự phòng.

2. Server-Side Rendering (SSR) và Lazy Loading

Lazy loading cũng có thể được sử dụng kết hợp với server-side rendering (SSR) để cải thiện thời gian tải ban đầu của ứng dụng của bạn. Tuy nhiên, nó đòi hỏi một số cấu hình bổ sung. Bạn sẽ cần đảm bảo rằng máy chủ có thể xử lý chính xác các import động và các component được tải lười được hydrat hóa đúng cách ở phía client.

Các công cụ như Next.js và Gatsby.js cung cấp hỗ trợ tích hợp cho lazy loading và tách code trong môi trường SSR, làm cho quá trình này dễ dàng hơn nhiều.

3. Tải trước các Component được tải lười

Trong một số trường hợp, bạn có thể muốn tải trước một component được tải lười trước khi nó thực sự cần thiết. Điều này có thể hữu ích cho các component có khả năng sẽ sớm được hiển thị, chẳng hạn như các component nằm bên dưới màn hình đầu tiên nhưng có khả năng sẽ được cuộn vào tầm nhìn. Bạn có thể tải trước một component bằng cách gọi hàm import() thủ công:


import('./MyComponent'); // Tải trước MyComponent

Điều này sẽ bắt đầu tải component trong nền, vì vậy nó sẽ có sẵn nhanh hơn khi nó thực sự được hiển thị.

4. Import động với Webpack Magic Comments

"Magic comments" của Webpack cung cấp một cách để tùy chỉnh tên của các phần code được tạo ra. Điều này có thể hữu ích cho việc gỡ lỗi và phân tích cấu trúc bundle của ứng dụng. Ví dụ:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Điều này sẽ tạo ra một phần code có tên là "my-component.js" (hoặc tương tự) thay vì một tên chung chung.

5. Tránh các lỗi thường gặp

Ví dụ và trường hợp sử dụng trong thế giới thực

Lazy loading có thể được áp dụng cho một loạt các kịch bản để cải thiện hiệu suất của các ứng dụng React. Dưới đây là một số ví dụ:

Ví dụ: Trang web thương mại điện tử quốc tế

Hãy tưởng tượng một trang web thương mại điện tử bán sản phẩm trên toàn cầu. Các quốc gia khác nhau có thể có các loại tiền tệ, ngôn ngữ và danh mục sản phẩm khác nhau. Thay vì tải tất cả dữ liệu cho mọi quốc gia ngay từ đầu, bạn có thể sử dụng lazy loading để tải dữ liệu cụ thể cho vị trí của người dùng chỉ khi họ truy cập trang web.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Hàm để xác định quốc gia của người dùng

  return (
    Đang tải nội dung cho khu vực của bạn...}>
      
      
    
  );
}

Kết luận

Lazy loading và tách code component là những kỹ thuật mạnh mẽ để tối ưu hóa hiệu suất của các ứng dụng React. Bằng cách chỉ tải các component khi chúng cần thiết, bạn có thể giảm đáng kể thời gian tải ban đầu, cải thiện trải nghiệm người dùng và nâng cao SEO của mình. Các component tích hợp sẵn của React là React.lazy() và <Suspense> giúp việc triển khai lazy loading trong các dự án của bạn trở nên dễ dàng. Hãy áp dụng những kỹ thuật này để xây dựng các ứng dụng web nhanh hơn, phản hồi tốt hơn và hấp dẫn hơn cho khán giả toàn cầu.

Hãy nhớ luôn xem xét trải nghiệm người dùng khi triển khai lazy loading. Cung cấp các giao diện người dùng dự phòng đầy đủ thông tin, xử lý các lỗi tiềm ẩn một cách khéo léo và phân tích cẩn thận hiệu suất của ứng dụng để đảm bảo bạn đạt được kết quả mong muốn. Đừng ngại thử nghiệm các cách tiếp cận khác nhau và tìm ra giải pháp tốt nhất cho nhu cầu cụ thể của bạn.